<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.global.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 将v-model作用在组件身上 希望将bookTitle与组件的名曰title的props做双向数据帮特定 -->
        <my-component v-model:title="bookTitle"></my-component>
        {{bookTitle}}
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    bookTitle: "《明朝那些事儿》"
                }
            }
        })

        app.component('my-component', {
            /* 没有v-model参数的时候 Vue框架帮我们定义了【props名曰modelValue】+【自定义事件名曰update:modelValue】 */
            /* 现在希望与指定的props做双向数据绑定 则手动定义【props名曰xxx】+【自定义事件名曰update:xxx】 */
            props: {
                title: String
            },
            emits: ['update:title'],

            // title的默认值为【双向绑定的目标数据bookTitle】
            // 发送自定义事件update:title 则载荷会自动同步给【双向绑定的目标数据bookTitle】
            template: `
            <input
                type="text"
                :value="title"
                @input="$emit('update:title', $event.target.value)">
            `
        })

        const vm = app.mount('#app')
    </script>
</body>

</html>